import { useEffect, memo } from 'react'
import { Modal, Form, Input, Select } from 'antd'

const MyModal = memo((props) => {
  const [form] = Form.useForm()
  const { isModalVisible, editData, popType, natureArr, handleOk, handleCancel } = props

  useEffect(() => {
    form.setFieldsValue(editData)
  }, [editData])

  useEffect(() => {
    if (popType === 'add') {
      form.setFieldsValue({ countryName: '', continent: '', nature: '' })
    }
  }, [popType])
  return (
    <Modal
      title="Basic Modal"
      visible={isModalVisible}
      onOk={() => {
        console.log('1------:', form.getFieldsValue())
        handleOk && handleOk(form.getFieldsValue())
      }}
      onCancel={handleCancel}
    >
      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal">
        <Form.Item name="countryName" label="国家">
          <Input />
        </Form.Item>
        <Form.Item name="continent" label="所属区域">
          {popType === 'add' ? <Input /> : <Input disabled />}
        </Form.Item>
        <Form.Item name="nature" label="社会性质">
          <Select value="社会主义共和国">
            {natureArr.map((item, index) => {
              return (
                <Select.Option key={index} value={item}>
                  {item}
                </Select.Option>
              )
            })}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  )
})

export default MyModal
